<!-- 邮箱注册 -->

<template>
	<view class="loginBox">
		<view class="languane"><text>Languane：中文</text></view>
		<view class="title_text">
			<view class="slogan_2"><text>登录新生态</text></view>
		</view>

		<view class="account_number">
			<input v-model.trim="account_numberValue" placeholder="邮箱或手机号" class="account_number_value" />
			<!-- <text class="Switch">切换手机登录</text> -->
		</view>

		<view class="slider-verification"><uni-slider-verification @send="send"></uni-slider-verification></view>
		<!-- <view class="account_number">
			<input v-model.trim="verification" type="text" placeholder="请输入验证码" class="account_number_value" />
			<text class="Switch" v-show="countdown">验证码</text>
			<text v-show="!countdown" class="Switch">{{ count }}s</text>
		</view> -->
		<uni-captcha ref="uni_captcha"></uni-captcha>
		<view class="btn"><button type="primary" :loading="true" class="backColor" @click="next_step">登录</button></view>
		<view class="registered"><text>没有账号？去注册</text></view>
	</view>
</template>

<script>
import uniSliderVerification from '@/components/uni-slider-verification/uni-slider-verification';
import uniCaptcha from '@/components/uni-captcha/uni-captcha';
export default {
	components: { uniSliderVerification, uniCaptcha },
	name: 'login',
	data() {
		return {
			email: '',
			isRegister: '',
			countdown: true,
			count: '',
			timer: null,
			countdownNum: null,
			verification: '',
			account_numberValue: ''
		};
	},
	methods: {
		send(n) {
			// console.log(this.$refs.uni_captcha);
		},
		next_step() {
			// this.$toast.loading({
			// 	message: '加载中...',
			// 	forbidClick: true
			// });
			let params = {
				phone: this.email,
				code: this.isRegister,
				type: 2
			};
			let par = {
				email: this.email,
				code: this.isRegister,
				type: 2
			};
			this.$api.number_erification(params).then(res => {
				if (res.code === 200) {
					this.$router.push({
						name: 'accountNumber',
						query: par
					});
				} else {
					this.$toast({
						message: res.msg
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.verification_code {
	font-size: 0.32rem;
	color: #68c2ff;
}
.loginBox {
	.title_text {
		color: $backColor;
		.slogan_2 {
			font-size: 40rpx;
			display: block;
			margin-left: 68rpx;
			// margin-top: 20rpx;
			background: url(../../static/image/logo.png);
			background-repeat: no-repeat;
			background-position-x: 230rpx;
			background-size: 90rpx 44rpx;
			background-position-y:10rpx ;
		}
	}
	.account_number {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 70rpx 70rpx 0 70rpx;
		padding: 40rpx 0;
		border-bottom: 2rpx solid #ededed;
		.account_number_value {
			flex: 1;
			font-size: 32rpx;
			color: #c2c2c2 !important;
		}
		.Switch {
			color: #5ca5d6;
			font-size: 24rpx;
		}
	}
	.slider-verification {
		margin: 0 50rpx;
		margin-top: 100rpx;
	}
	.btn {
		margin: 200rpx 70rpx 0 70rpx;
		.backColor {
			color: #ffffff;
			background: $backColor;
		}
	}
	.registered {
		color: $backColor;
		font-size: 28rpx;
		margin-top: 100rpx;
		margin-left: 70rpx;
		text-decoration: underline;
	}
}

.languane {
	color: $backColor;
	font-size: 22rpx;
	text-align: right;
	padding: 70rpx;
}
</style>
